<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body>



<header class="head">
    <div class="picture">
        <a href="#"class="h_a">
            <div class="wrap"></div>
        </a>
    </div>


 <div class="black_head">
     <div class="wrap">
         <a href="#">小米商城</a>
         <a href="#">MIUI</a>
         <a href="#">米聊</a>
         <a href="#">游戏</a>
         <a href="#">多看阅读</a>
         <a href="#">云服务</a>
         <a href="#">小米网移动版</a>
         <a href="#">问题反馈</a>
         <a href="#">SelectRegion</a>
         <a href="#"class="gouwuche"><div class="gwc_img"></div><span style="display: inline-block;float: left;">购物车(0)</span>
             <div class="gwc_list">
                 您的购物车没有东西
             </div>
         </a>
         <a href="#"class="zhuce">注册</a>
         <a href="#"class="denglu">登陆</a>
     </div>
 </div>


    <div class="white_head">
        <div class="wrap">
            <div class="logo"></div>
            <div class="nav_gif"></div>
            <div class="nav">
                <ul>
                    <li class="mi_phone"><a href="#">小米手机</a>
                        <div class="sub_list1">
                            <div class="wrap">
                                <div class="max">
                                <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                    <img src="../img/小米max.jpg" alt=""width="160"height="110"/></a>
                                <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                  <span style="position: relative;left: 45px;top: -30px;">1299元起</span></div>
                                 <div class="mi5">
                                     <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                         <img src="../img/小米手机5.jpg" alt=""width="160"height="110"/></a>
                                     <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                     <span style="position: relative;left: 45px;top: -30px;">1799元起</span>
                                 </div>
                                 <div class="mi4c">
                                     <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                         <img src="../img/小米手机4c.jpg" alt=""width="160"height="110"/></a>
                                     <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                     <span style="position: relative;left: 45px;top: -30px;">1099元起</span>
                                 </div>
                            </div>
                        </div>
                    </li>
                    <li class="red_mi"><a href="#">红米</a>
                        <div class="sub_list2">
                            <div class="wrap">
                                <div class="max">
                                    <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                        <img src="../img/小米max.jpg" alt=""width="160"height="110"/></a>
                                    <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                    <span style="position: relative;left: 45px;top: -30px;">1299元起</span></div>
                                <div class="mi5">
                                    <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                        <img src="../img/小米手机5.jpg" alt=""width="160"height="110"/></a>
                                    <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                    <span style="position: relative;left: 45px;top: -30px;">1799元起</span>
                                </div>
                                <div class="mi4c">
                                    <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                        <img src="../img/小米手机4c.jpg" alt=""width="160"height="110"/></a>
                                    <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                    <span style="position: relative;left: 45px;top: -30px;">1099元起</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="pingban"><a href="#">平板 · 笔记本</a>
                        <div class="sub_list3">
                            <div class="wrap">
                                <div class="max">
                                    <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                        <img src="../img/小米max.jpg" alt=""width="160"height="110"/></a>
                                    <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px;color: black">小米max</a></div>
                                    <span style="position: relative;left: 45px;top: -30px;">1299元起</span></div>
                                <div class="mi5">
                                    <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                        <img src="../img/小米手机5.jpg" alt=""width="160"height="110"/></a>
                                    <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                    <span style="position: relative;left: 45px;top: -30px;">1799元起</span>
                                </div>
                                <div class="mi4c">
                                    <a href="#"style="display: block;width: 160px;height: 115px;margin-top: 30px">
                                        <img src="../img/小米手机4c.jpg" alt=""width="160"height="110"/></a>
                                    <div class="title"><a href="#"style="display: block;position: absolute;top: -30px;left: 50px">小米max</a></div>
                                    <span style="position: relative;left: 45px;top: -30px;">1099元起</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">电视</a>

                    </li>
                    <li><a href="#">盒子 · 影音</a>
                        <div class="sub_list"></div>
                    </li>
                    <li><a href="#">路由器</a>

                    </li>
                    <li><a href="#">智能硬件</a>

                    </li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
                <a href="#" class="input_content1"id="c1">红米pro</a>
                <a href="#" class="input_content2"id="c2">小米笔记本Air</a>
            </div>
            <input id="test" type="text"class="nav_input"onclick="showdiv()"/>
            <div id="aa"style="border:#000 solid 1px; width:245px; height:301px; display:none;position: absolute;top: 176px;right: 393px;border-color:#ff6700;background-color: white"></div>
            <div class="search"></div>
        </div>
    </div>


</header>


<section class="one">
<div class="wrap">
<div class="top">
<div class="left">
  <ul>
      <li class="left1"><a href="#"style="margin-top: 25px">手机 电话卡 <span class="narrow"> ></span></a>
          <div class="sub_list">
               <ul class="sj-dhk_lists1">
                   <li><a href="#"class="a1"><img src="../img/xiaomi5——xiao.jpg" alt=""/></a><a href="#"class="a2">小米手机5</a><a href="#"class="a3">选购</a></li>
                   <li><a href="#"class="a1"style="margin-left: -40px"><img src="../img/xiaomi5——xiao.jpg" alt=""/></a><a href="#"class="a2">小米手机5</a><a href="#"class="a3">选购</a></li>
                   <li><a href="#"class="a1"style="margin-left: -40px"><img src="../img/xiaomi5——xiao.jpg" alt=""/></a><a href="#"class="a2">小米手机5</a><a href="#"class="a3">选购</a></li>
               </ul>
              <ul class="sj-dhk_lists2">
                  <li><a href="#"class="a1"><img src="../img/xiaomi5——xiao.jpg" alt=""/></a><a href="#"class="a2">小米手机5</a><a href="#"class="a3">选购</a></li>
                  <li><a href="#"class="a1"style="margin-left: -40px"><img src="../img/xiaomi5——xiao.jpg" alt=""/></a><a href="#"class="a2">小米手机5</a><a href="#"class="a3">选购</a></li>
                  <li><a href="#"class="a1"style="margin-left: -40px"><img src="../img/xiaomi5——xiao.jpg" alt=""/></a><a href="#"class="a2">小米手机5</a><a href="#"class="a3">选购</a></li>
              </ul>
          </div>
      </li>
      <li class="left2"><a href="#">笔记本 平板<span class="narrow"> ></span></a></li>
      <li class="left3"><a href="#">电视 盒子<span class="narrow"> ></span></a></li>
      <li class="left4"><a href="#">路由器 智能硬件<span class="narrow"> ></span></a></li>
      <li class="left5"><a href="#">移动电源 电池 插线板<span class="narrow"> ></span></a>
          <div class="sub_list">
          </div>
      </li>
      <li class="left6"><a href="#">耳机 音响<span class="narrow"> ></span></a></li>
      <li class="left7"><a href="#">保护套 贴膜<span class="narrow"> ></span></a></li>
      <li class="left8"><a href="#">线材 支架 存储卡<span class="narrow"> ></span></a></li>
      <li class="left9"><a href="#">箱包 服饰<span class="narrow"> ></span></a></li>
      <li class="left10"><a href="#">米兔 生活周边<span class="narrow"> > </span></a></li>
  </ul>
</div>
</div>

<div class="bottom">

</div>



    </div>
</section>


</body>
<script type="text/javascript">
    /*定义一个函数，函数名叫$。 接收一个参数id ， 调用时返回id为此id的元素对象。*/
    function $(id){
        return document.getElementById(id)
    }
    function showdiv()
    {
        $("aa").style.display="block";
        $("test").style.border="1px solid #ff6700";
        $("test").style.outline="none";
        $("c1").style.display="none";
        $("c2").style.display="none";
    }

    document.documentElement.onclick=function(e){
        /*e事件参数*/
        e=window.event?window.event:e;/*处理此窗口上发生的窗口焦点事件：将它们指派到任何注册。
         注：只有为此组件启用了窗口事件时，此方法才有可能被调用。*/
        var e_tar=e.srcElement?e.srcElement:e.target;/*规范：第一个是ie下的  第二个是ff下的*/
        if(e_tar.id=="test"||e_tar.id=='aa')
        {
            return;
        }
        else
        {
            $("aa").style.display="none";
            $("c1").style.display="block";
            $("c2").style.display="block";
            $("test").style.borderColor="black";
        }
    }


</script>
</html>